<template>
	<view class="feedback-index-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="意见反馈"></CustomNav>
		<view class="form-block block" :style="'margin-top:'+mt">
			<view class="form-item">
				<view class="form-label">意见反馈</view>
				<textarea v-model="form.content" class="textarea" placeholder-class="input-placeholder" placeholder="请输入反馈内容"></textarea>
			</view>
		</view>
		<view class="btn normal" @click="submit">提交</view>
	</view>
</template>

<script>
	import {saveFeedBack} from '@/api/sundry.js'
	import {
		validate
	} from '@/util/validate.js';
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				form: {
					content: '',
				},
				rule: {
					content: {
						name: '反馈内容',
						required: true
					},
				},
			}
		},
		methods: {
			submit() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '保存中',
						mask: true,
					})
					saveFeedBack(this.form).then(() => {
						this.showToast('保存成功',()=>{
							this.back()
						});
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.feedback-index-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}

		.form-block {
			margin: 30rpx auto;
			padding: 30rpx;
			background: #fff;
			border-radius: 14px;
			.form-item{
				width: 100%;
				height: auto;
				min-height: 100rpx;
				flex-wrap: wrap;
				align-items: flex-start;
				.form-label{
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					.require{
						color: red;
					}
					.no-require{
						color: #fff;
					}
				}
				.textarea{
					font-size: 28rpx;
					padding: 30rpx;
					margin-top: 20rpx;
					width: 100%;
					border-radius: 12px;
					background: #f5f6f8;
				}
			}
		}

		.btn {
			margin: 30rpx auto;
		}
	}
</style>